/**
 * @author kobe
 * @author truexin
 * @date   16/06/21
 * @reviseDate   16/08/12
 */

import PullRefresh from '../components/mui/PullRefresh.js';
import NoData from '../components/NoData.js';

(function (lf, r) {
    let RC = r.createClass,
        ajax = lf.utils.ajax,
        getUrlParam = lf.utils.getUrlParam,
        doAction = lf.bridgeJs.doAction;
    
    const TYPE = getUrlParam('type'),
        CHECK = 'CHECK',
        PUBLISH = "PUBLISH";
    
    let NoticeList = RC({
        render: function () {
            let user = this.props.user,
                noData = this.props.noData;
            let notice_list = this.props.info.map(function (info) {
                return (
                    <List info={info} noticeId={info.id} user={user}/>
                )
            })
            if (noData && TYPE == 'CHECK') {
                let noData = {
                    span_text: '没有需要您审核的通知哦',
                };
                return <NoData data={noData}/>
            } else if (noData && TYPE == 'PUBLISH') {
                let noData = {
                    span_text: '没有需要您发布的通知哦',
                };
                return <NoData data={noData}/>
            }
            else {
                return (
                    <ul className="mui-table-view mui-table-view-striped mui-table-view-condensed">
                        {notice_list}
                    </ul>
                )
            }
        }
    })
    
    let List = RC({

        componentDidMount: function () {

            let list = r.findDOMNode(this.refs.list);

            let noticeId = this.props.noticeId,
                userId = this.props.user.id;
            
            list.addEventListener('tap', function (e) {
                if (TYPE == CHECK) {
                    doAction('notice-detail.html?type=' + TYPE + '&noticeId=' + noticeId, '审核通知');
                } else {
                    e = window.event || e;
                    let target = e.srcElement || e.target;
                    if (target.nodeName != "P") {
                        doAction('notice-detail.html?type=' + TYPE + '&noticeId=' + noticeId, '发布通知');
                    } else {
                        ajax({
                            type: "POST",
                            data: {
                                noticeId: noticeId,
                                staffId: userId,
                            },
                            success: function (data) {
                                mui.toast('发布成功')
                                location.reload();
                            }
                        }, lf.api.worktable.noticePublish);
                    }
                }
            })
        },
        render: function () {
            
            let info = this.props.info,
                setInfo = '';
            
            if (TYPE == CHECK) {
                setInfo = {
                    btnClass: 'checkBtn',
                    btnName: '审核',
                    time: lf.utils.format(info.startTime, 'yyyy-MM-dd hh:mm')
                }
            } else if (TYPE == PUBLISH) {
                setInfo = {
                    btnClass: 'publishBtn',
                    btnName: '发布',
                    time: lf.utils.format(info.reviewTime, 'yyyy-MM-dd hh:mm')
                }
            }
            
            return (
                <li className="mui-table-view-cell" ref="list">
                    <a href="javascript:;" className="to-detail">
                        <div className="title">
                            <h4 className={"mui-ellipsis mui-pull-left " + (info.readStatus == 1 ? "read" : '') }>{info.title}</h4>
                            <span className="time mui-pull-right">{setInfo.time}</span>
                        </div>
                        <p data-type="detail" className={"mui-btn-green btn " + setInfo.btnClass}>{setInfo.btnName}</p>
                    </a>
                </li>
            )
        }
    })
    
    let Root = r.createClass({
        getInitialState: function () {
            return ({
                list: [],
                noData: ''
            })
        },
        getList: function (user, page) {
            
            if (!page) page = 1;
            
            let me = this,
                api = '';
            if (TYPE == CHECK) {
                api = lf.api.worktable.checkList;
            } else if (TYPE == PUBLISH) {
                api = lf.api.worktable.publishList;
            }

            ajax({
                type: "POST",
                data: {
                    staffId: user.id,
                    page: page,
                },
                success: function (data) {
                    if (data.code == '200') {
                        me.setList(data);
                    }
                    else {
                        alert(data.desc);
                    }
                }
            }, api);
            
        },
        setList(data){
            let me = this;

            if (!data.dataList.length) {
                me.setState({
                    noData: true,
                })
            } else {
                let list = me.state.list;
                let resultList = data.dataList;
                $.each(resultList, function (i, item) { //关键地方,必须有两个参数,不然一个只能默认是下标了。
                    list.push(item);
                });

                mui('#pullrefresh')
                .pullRefresh()
                .endPullupToRefresh((list.length == data.maxCount)); //refresh completed

                me.setState({
                    list: list,
                    noData: false
                })
            }
        },
        componentWillMount: function () {
            let me = this,
                user = me.props.user;
            
            lf.appJs.refresh();
            
            me.getList(user)
            
        },
        render: function () {
            return (
                <div className="notice-list container">
                    <NoticeList info={this.state.list} user={this.props.user} noData={this.state.noData}/>
                </div>
            )
        },
        componentWillReceiveProps: function (nextProps) {
            let page = nextProps.page,
                user = nextProps.user;
            this.getList(user, page, true)
        }
    });
    
    let PullRefreshCon = React.createClass({
        getInitialState: function () {
            return {
                page: 1,
            }
        },
        pullupFn: function () {
            let newPage = ++this.state.page;
            this.setState({page: newPage});
        },
        render: function () {
            let me = this;
            return <PullRefresh pullupFn={me.pullupFn} data={<Root page={me.state.page} user={me.props.user}/>}/>;
        }
    });
    
    lf.appJs.getUser(function (user) {
        r.render(
            <PullRefreshCon user={user}/>,
            document.getElementById('root'), function () {
                $('#root').css('background', 'none');
                
            }
        )
    })
    
})(liefeng, React);
